import Base from "../base.js";
import seatsApi from "../../api/seats.js";

export default class extends Base {
    constructor(prop) {
        super(prop);
        this._id = prop._id;
        // console.log(prop);
        // console.log(this._id);
    }
  
    seatsArr = []
    render() {
        this.$el.html(`
            <div class="set-seats">
                <div class="seats-num">
                    座位号：<div class="seats-info"></div>
                </div>
                <div class="seats-box"></div>
            </div>
        `)
        this.seatsBox = $(".seats-box");
        this.index = layer.load(1)
    }
    async addNewSeats() {
        let data = await seatsApi.searchSeats({ theaterId: this._id });

        if (!data) {
            this.addNewSeats()
        } else {
            layer.close(this.index);
            this.seatsBox.html(`
            ${_.map(data, (item, index) => {
                return `
                         <span _id="${item._id}" row="${item.row}" col="${item.col}" class='seats'></span>
                        ${(~~index + 1) % 9 == 0 ? `<br/>` : ''}
                         `
            }).join("")
                }
         `)
        }



    }
    handle() {

    }
    mounted() {
        this.rerender();
        let that = this;
        console.log(that);
        $(document).on("click", ".seats", function () {
            $(this).toggleClass("choose");
            if ($(this).hasClass("choose")) {
                that.seatsArr.push({
                    _id: $(this).attr("_id"),
                    row: $(this).attr("row"),
                    col: $(this).attr("col")
                })
            } else {
                for (let i = that.seatsArr.length - 1; i > -1; i--) {
                    that.seatsArr[i]._id == $(this).attr("_id") ? that.seatsArr.splice(i, 1) : ""
                }
            }

            $(".seats-info").html(`
                ${_.map(that.seatsArr, item => {
                return `
                            <span class="row-num">${item.row}</span> 排 
                            <span class="col-num">${item.col}</span> 号
                        `
            })
                }
            `)



        })
    }
    rerender() {
        this.addNewSeats();
    }
}